/**
 * ---color value default---
 * 		red-def-btn:#E02222
 * 			red-hover-btn:#F14949
 * 	    	red-act-btn:#C01E1E
 * 		blue-def-btn:#094CD9;
 * 			blue-act-btn:#0639A4;
 * 		gray-def-btn:#9B9B9B;
 * 			gray-act-btn:#7E7E7E;
 * 		white-def-btn:#fff;
 * 			white-act-btn:#EBEBEB;
 * 		lightb-def-btn:#4A90E2;
 * 			lightb-act-btn:#3273bf;
 * 		    lightb-disable-btn:#9B9B9B;
 *      purple-def-btn:#C52A82
 *          purple-hover-btn:
 *          purple-act-btn:
 * 		边框:def-border:#9B9B9B;
 * ---color style---
 * <default>
 * 		1.红色按钮:red-def-btn
 * 		2.蓝色按钮:blue-def-btn
 * 		3.灰色按钮:gray-def-btn
 * 		4.黑白灰按钮:white-def-btn
 * 		5.浅蓝按钮:lightb-def-btn
 *      6.紫红色按钮:purple-def-btn
 * ---size style---
 * 		超小号:
 * 		小号:btn-small
 * 		中号:btn-mid
 * 		大号:btn-big
 * 		超大号:
 * ---font value---
 * 		font-light:#fff !important;
 * 		font-dark:#4A4A4A !important;
 */

@import "mixin";
$purple-def-btn:#C52A82;
$purple-hover-btn:hsla(326, 65%, 60%, 1);
$purple-act-btn:hsla(327, 70%, 70%, 1);
$red-def-btn:#E02222;
$red-hover-btn:#F14949;
$red-act-btn:#C01E1E;
$blue-def-btn:#094CD9;
$blue-act-btn:#0639A4;
$gray-def-btn:#9B9B9B;
$gray-act-btn:#7E7E7E;
$white-def-btn:#fff;
$white-act-btn:#EBEBEB;
$def-border:#9B9B9B;
$lightb-def-btn:#3BA1EB;
$lightb-act-btn:#3273bf;
$lightb-disable-btn:#9B9B9B;
$font-light:#fff !important;
$font-dark:#4A4A4A !important;
%round-side {
    @include border-radius(4px);
    display: block;
}

.purple-def-btn {
    background-color: $purple-def-btn;
    @extend %round-side;
    &:hover {
        background-color: $purple-hover-btn;
    }
    &:active {
        background-color: $purple-act-btn;
    }
}

.red-def-btn {
    background-color: $red-def-btn;
    @extend %round-side;
    color: $font-light;
    &:hover {
        background-color: $red-hover-btn;
    }
    &:active {
        background-color: $red-act-btn;
    }
}

.blue-def-btn {
    background-color: $blue-def-btn;
    @extend %round-side;
    color: $font-light;
    &:active {
        background-color: $blue-act-btn;
    }
}

.gray-def-btn {
    background-color: $gray-def-btn;
    @extend %round-side;
    color: $font-light;
    &:active {
        background-color: $gray-act-btn;
    }
}

.white-def-btn {
    background-color: $white-def-btn;
    @extend %round-side;
    color: $font-dark;
    border-color: $def-border;
    border-width: 1px;
    border-style: solid;
    &:active {
        background-color: $white-act-btn;
    }
}

.lightb-def-btn {
    @extend %round-side;
    background-color: $lightb-def-btn;
    color: $font-light;
    &:active {
        background-color: $lightb-act-btn;
    }
}


/*交互-禁用*/

.lightb-disable-btn {
    @extend %round-side;
    background-color: $lightb-disable-btn;
}


/* end */

.btn-big {
    width: 300px;
    height: 38px;
    text-align: center;
    line-height: 38px;
}

.btn-mid {
    width: 110px;
    height: 32px;
    text-align: center;
    line-height: 32px;
}

.btn-small {
    width: 60px;
    height: 24px;
    text-align: center;
    line-height: 24px;
}